<template>
  <div class="home">
    <div class="search">
      <div class="logo">
        <img src="../../../public/images/logo.svg" alt="" />
      </div>
      <router-link
        to="/search"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
         <div class="search-con" @click="navigate">
        <img src="../../../public/images/home/home-search.svg" alt="" />
        <div class="placeholder">你在找什么？</div>
      </div>
      </router-link> 
    </div>
    <div class="home-goods">
      <div class="banner">
        <h2 class="h2title">618 宜家购物节</h2>
        <div class="banner-lite">
          <img src="../../../public/images/home/home-banner.webp" alt="" />
          <div class="buynow">
            <p>立即选购</p>
            <img
              src="../../../public/images/home/arrowRightBlackColor.svg"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="newManGift">
        <h2 class="h2title">新人礼遇</h2>
        <div class="giftBanner">
          <img src="../../../public/images/home/home-gift.png" alt="" />
        </div>
      </div>
      <div class="childGift">
        <div class="childGifyBanner">
          <img src="../../../public/images/home/childGiftBanner.png" alt="" />
        </div>
        <div class="childGiftTitle">
          <div class="cgt-title">
            <h2 class="h2title">5.28-6.7 指定玩具套装特惠，低至8.5折</h2>
            <p>还有更多精彩线下活动等你来参与！</p>
            <div class="black-btn">立即选购</div>
          </div>
        </div>
      </div>
      <div class="newHome">
        <h2 class="h2titleBig">夏日至，焕新家</h2>
        <div>
          <img src="../../../public/images/home/home-newhome-1.webp" alt="" />
        </div>
        <div>
          <img src="../../../public/images/home/home-newhome-2.webp" alt="" />
        </div>
      </div>
      <div class="findFresh">
        <h2 class="h2title">发现新鲜</h2>
        <div class="btScroll">
          <ul class="bts">
            <li>
              <div>
                <img src="../../../public/images/home/fresh-1.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>清凉好物，开启夏季享乐计划</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="hotSall">
        <h2 class="h2titleBig">热销精选</h2>
        <div class="ulcon">
          <ul>
            <li>
              <div class="imghot">
                <img
                  src="https://www.ikea.cn/cn/zh/images/products/billy-bi-li-oxberg-ao-ke-bo-shu-jia-bai-se__0641255_PE700390_S4.JPG?f=xxxs"
                  alt=""
                />
              </div>
              <div class="hotSallTitle">
                <h4>BILLY 毕利 / OXBERG 奥克伯</h4>
                <h5>书架，白色，80x30x202 厘米</h5>
                <div class="padding"></div>
                <div class="priceText">
                  <span class="price-min">￥</span>
                  <span class="price-max">699</span>
                  <span class="price-min">.00</span>
                </div>
              </div>
            </li>
            <li>
              <div class="imghot">
                <img
                  src="https://www.ikea.cn/cn/zh/images/products/billy-bi-li-oxberg-ao-ke-bo-shu-jia-bai-se__0641255_PE700390_S4.JPG?f=xxxs"
                  alt=""
                />
              </div>
              <div class="hotSallTitle">
                <h4>BILLY 毕利 / OXBERG 奥克伯</h4>
                <h5>书架，白色，80x30x202 厘米</h5>
                <div class="padding"></div>
                <div class="priceText">
                  <span class="price-min">￥</span>
                  <span class="price-max">699</span>
                  <span class="price-min">.00</span>
                </div>
              </div>
            </li>
            <li>
              <div class="imghot">
                <img
                  src="https://www.ikea.cn/cn/zh/images/products/billy-bi-li-oxberg-ao-ke-bo-shu-jia-bai-se__0641255_PE700390_S4.JPG?f=xxxs"
                  alt=""
                />
              </div>
              <div class="hotSallTitle">
                <h4>BILLY 毕利 / OXBERG 奥克伯</h4>
                <h5>书架，白色，80x30x202 厘米</h5>
                <div class="padding"></div>
                <div class="priceText">
                  <span class="price-min">￥</span>
                  <span class="price-max">699</span>
                  <span class="price-min">.00</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="black-btn">选购更多热销商品</div>
      </div>
      <div class="feature">
        <ul>
          <li>
            <img src="../../../public/images/home/feature-1.webp" alt="" />
            <p>宜家全屋设计 | 1对1专业服务，为您打造理想的家</p>
            <div class="moreInfo">了解详情</div>
          </li>
          <li>
            <img src="../../../public/images/home/feature-2.webp" alt="" />
            <p>宜家对公业务 | 专业设计，批量采购</p>
            <div class="moreInfo">了解详情</div>
          </li>
          <li>
            <img src="../../../public/images/home/feature-3.webp" alt="" />
            <p>5.20-6.30，成为会员，即可获赠香烤鸡翅一对！</p>
            <div class="moreInfo">了解详情</div>
          </li>
        </ul>
      </div>
      <div class="moveto">
        <h2 class="h2title">给家注入夏日活力</h2>
        <img src="../../../public/images/home/moveto-1.webp" alt="" />
        <ul>
          <li>
            <ul>
              <li>
                <img src="../../../public/images/home/moveto-2.webp" alt="" />
              </li>
              <li>
                <img src="../../../public/images/home/moveto-3.webp" alt="" />
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <img src="../../../public/images/home/moveto-4.webp" alt="" />
              </li>
              <li>
                <img src="../../../public/images/home/moveto-5.webp" alt="" />
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="moreSpace">
        <h2 class="h2titleBig">探索更多空间</h2>
        <ul>
          <li>
            <img src="../../../public/images/home/moreSpace-1.webp" alt="" />
            <div class="white-btn">阳台</div>
          </li>
          <li>
            <img src="../../../public/images/home/moreSpace-2.webp" alt="" />
            <div class="white-btn">户外</div>
          </li>
        </ul>
      </div>
      <div class="moveto moveto2">
        <h2 class="h2title">探索夏季新品</h2>
        <p>
          浏览并选购我们全新推出的产品！每一款产品都能契合不同房间和风格，带给你新的视觉亮点。
        </p>
        <img src="../../../public/images/home/moveto-1.webp" alt="" />
        <ul>
          <li>
            <ul>
              <li>
                <img src="../../../public/images/home/moveto-2.webp" alt="" />
              </li>
              <li>
                <img src="../../../public/images/home/moveto-3.webp" alt="" />
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <img src="../../../public/images/home/moveto-4.webp" alt="" />
              </li>
              <li>
                <img src="../../../public/images/home/moveto-5.webp" alt="" />
              </li>
            </ul>
          </li>
        </ul>
        <h2 class="h2titleSmall">
          <span>探索更多当季新品</span>
          <svg
            data-v-07814981=""
            data-v-7789a442=""
            fill="none"
            viewBox="0 0 24 24"
            height="60"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>
      </div>
      <div class="banner">
        <h2 class="h2title">限量发售中</h2>
        <div class="banner-lite">
          <img src="../../../public/images/home/less.webp" alt="" />
          <div class="buynow">
            <p>立即选购</p>
            <img
              src="../../../public/images/home/arrowRightBlackColor.svg"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="findFresh findFresh2">
        <h2 class="h2title">更多新品系列</h2>
        <div class="btScroll">
          <ul class="bts">
            <li>
              <div>
                <img src="../../../public/images/home/more-new-1.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>优质睡眠，从选一个好枕头开始</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/more-new-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>INBJUDEN 因尤登 ── 打造春季浪漫派对</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="moreInfoCon">
        <div class="moreInfo">探索更多系列新品</div>
      </div>
      <div class="moveto">
        <ul>
          <li>
            <ul>
              <li>
                <img
                  src="https://www.ikea.cn/images/74/61/746172b8c5e237b1972099b748694e69.jpg?f=xl"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="https://www.ikea.cn/images/c1/cd/c1cdb022434919fc235a1148aa4c7b19.jpg?f=xl"
                  alt=""
                />
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <img
                  src="https://www.ikea.cn/images/63/e2/63e29f68f849519fa6944d4b69772cde.jpg?f=xl"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="https://www.ikea.cn/images/27/64/2764c2e7f29b2b0c1220f42c431221e8.jpg?f=xl"
                  alt=""
                />
              </li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <ul>
              <li>
                <img
                  src="https://www.ikea.cn/images/74/61/746172b8c5e237b1972099b748694e69.jpg?f=xl"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="https://www.ikea.cn/images/c1/cd/c1cdb022434919fc235a1148aa4c7b19.jpg?f=xl"
                  alt=""
                />
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <img
                  src="https://www.ikea.cn/images/63/e2/63e29f68f849519fa6944d4b69772cde.jpg?f=xl"
                  alt=""
                />
              </li>
              <li>
                <img
                  src="https://www.ikea.cn/images/27/64/2764c2e7f29b2b0c1220f42c431221e8.jpg?f=xl"
                  alt=""
                />
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="moreInfoCon">
        <div class="moreInfo">发现更多超值好物</div>
      </div>
      <div class="moreSpace">
        <h2 class="h2title">热销商品榜</h2>
        <ul>
          <li>
            <img
              src="https://www.ikea.cn/images/be/1c/be1c999e9c84231c1d40c96906237f82.jpg?f=xl"
              alt=""
            />
            <div class="white-btn">舒适睡眠</div>
          </li>
          <li>
            <img
              src="https://www.ikea.cn/images/d7/ae/d7ae704476290e9f8855b3d3b49a4a4a.jpg?f=xl"
              alt=""
            />
            <div class="white-btn">精致用餐</div>
          </li>
        </ul>
      </div>
      <div class="findFresh findFresh3">
        <h2 class="h2titleBig">发现家的无限值</h2>
        <div class="btScroll">
          <ul class="bts">
            <li>
              <div>
                <img
                  src="https://www.ikea.cn/images/e8/2e/e82ea91c851d4b64c858fc3628c3065c.jpg?f=xl"
                  alt=""
                />
              </div>
              <div class="btsTitle">
                <h3>更新至第5期──爆改工作室，工作生活二合一</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="findFresh findFresh4">
        <h2 class="h2title">微改造，大不同！</h2>
        <div class="btScroll">
          <ul class="bts">
            <li>
              <div>
                <img
                  src="https://www.ikea.cn/images/50/74/5074f4008840e63a2bdcb5a3bd10f5df.jpg?f=xl"
                  alt=""
                />
              </div>
              <div class="btsTitle">
                <h3>治愈系装扮，遇见转角的浪漫</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <li>
              <div>
                <img src="../../../public/images/home/fresh-2.webp" alt="" />
              </div>
              <div class="btsTitle">
                <h3>空间小焕新，享受健康假日</h3>
                <div class="imgcon">
                  <img
                    src="../../../public/images/home/arrowRightWhiteBackground.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="moreSpace">
        <h2 class="h2title">购买产品，打造更可持续的家居生活</h2>
        <ul>
          <li>
            <img
              src="https://www.ikea.cn/images/e6/cd/e6cd3e34b9372f80a5d7db2c1bb49dbb.jpg?f=xl"
              alt=""
            />
            <div class="white-btn">节约水源</div>
          </li>
          <li>
            <img src="../../../public/images/home/moreSpace-2.webp" alt="" />
            <div class="white-btn">节约能源</div>
          </li>
        </ul>
      </div>
      <div class="goodsInfo">
        <div class="h2titleBig">产品信息及通知</div>
        <h2 class="h2titleSmall">
          <span>探索更多当季新品</span>
          <svg
            fill="none"
            viewBox="0 0 24 24"
            height="60"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>
        <h2 class="h2titleSmall">
          <span>宜家在中国大陆市场召回 KULLEN 库伦 三斗抽屉柜</span>
          <svg
            fill="none"
            viewBox="0 0 24 24"
            height="60"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>
        <h2 class="h2titleSmall">
          <span
            >宜家因潜在破裂和烫伤风险召回HEROISK 希罗斯 和TALRIKA 塔利卡
            系列盘、碗和杯子
          </span>
          <svg
            fill="none"
            viewBox="0 0 24 24"
            height="60"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>
        <h2 class="h2titleSmall">
          <span>钢化玻璃杯说明</span>
          <svg
            fill="none"
            viewBox="0 0 24 24"
            height="60"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M15.5996 11.9999L9.81456 17.7857L8.40026 16.3716L12.7714 11.9999L8.40026 7.62823L9.81457 6.21411L15.5996 11.9999Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>        
      </div>
      <footer>
        <h2 class="h2titleSmall">
          <span>
            <svg
              data-v-07814981=""
              data-v-d87b1342=""
              fill="none"
              viewBox="0 0 24 24"
              height="24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="famIcon svg-icon"
            >
              <path
                xmlns="http://www.w3.org/2000/svg"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M2.00391 5H3.00391H21.0039H22.0041L22.0039 6.0002L22.0015 18.0002L22.0012 19H21.0015H3.00391H2.00391V18V6V5ZM4.00391 7V9H20.0033L20.0037 7H4.00391ZM4.00391 17V11H20.0029L20.0017 17H4.00391ZM13 15H18V13H13V15Z"
                fill="currentColor"
              ></path>
            </svg>
            <p>加入宜家俱乐部</p>
          </span>
          <svg
            data-v-07814981=""
            data-v-d87b1342=""
            fill="none"
            viewBox="0 0 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M19.2937 12.7074L20.0008 12.0003L19.2938 11.2932L12.0008 3.99927L10.5865 5.41339L16.1727 11.0003H4V13.0003H16.1723L10.5855 18.5868L11.9996 20.0011L19.2937 12.7074Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>
        <h2 class="h2titleSmall">
          <span>
            <svg
              data-v-07814981=""
              data-v-d87b1342=""
              fill="none"
              viewBox="0 0 24 24"
              height="24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
              class="moreInterestIcon svg-icon"
            >
              <path
                xmlns="http://www.w3.org/2000/svg"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12 4.74087C12.013 5.66812 12.4398 6.54104 13.1635 7.12087C14.3878 8.1545 15.6686 9.11932 17 10.0109C17 10.0109 19.76 7.99817 20.641 7.12087C21.3949 6.5419 21.8845 5.68435 22 4.74087C21.9856 3.22121 20.7439 1.99994 19.2242 2.01087C18.3209 1.92301 17.4502 2.37341 17 3.16137C16.5627 2.38261 15.7097 1.9324 14.82 2.01087C13.2956 2.00662 12.0452 3.21717 12 4.74087ZM13.1494 16.0109H20.5424C21.2467 16.039 21.8391 16.5481 21.9727 17.2403C22.1125 17.9303 21.7382 18.6214 21.084 18.8815L14.3067 21.8009C13.9713 21.9384 13.6125 22.0097 13.25 22.0109C13.0234 22.0105 12.7978 21.9822 12.5781 21.9267L5.9306 20.0517L5.6353 20.0109H2V18.0109H5.6264C5.9053 18.0107 6.18298 18.0477 6.4521 18.1209L13.0814 19.9757C13.2348 20.0114 13.3956 19.9986 13.5414 19.9389L17.8886 18.0663H13.077C12.8144 18.0662 12.5555 18.0045 12.321 17.8863L9.1523 16.2897L7.2607 16.9956C6.92256 17.1213 6.543 17.0565 6.26567 16.8258C5.98834 16.5951 5.8556 16.2337 5.91767 15.8783C5.97975 15.5229 6.22717 15.2279 6.5663 15.1049L12.1351 13.0109H6.6894C6.45695 13.0234 6.23717 13.1207 6.0717 13.2845L5.1694 14.1939C4.63065 14.7369 3.89736 15.0424 3.1324 15.0424H2V13.0109H3.1362C3.3687 13.0109 3.59158 12.918 3.7553 12.753L4.6613 11.8556C5.19774 11.315 5.92781 11.0109 6.6894 11.0109H15.9135C15.922 11.0109 15.9301 11.0129 15.9382 11.0149C15.9457 11.0168 15.9532 11.0187 15.9613 11.019C15.9679 11.0188 15.974 11.0169 15.9801 11.0149C15.9865 11.0129 15.9929 11.0109 16 11.0109C16.6244 11.0363 17.1455 11.4959 17.2487 12.1122C17.352 12.7286 17.009 13.3329 16.427 13.5604L11.7218 15.3309L13.1494 16.0109Z"
                fill="#111111"
              ></path>
              <mask
                xmlns="http://www.w3.org/2000/svg"
                id="mask0"
                mask-type="alpha"
                maskUnits="userSpaceOnUse"
                x="2"
                y="2"
                width="21"
                height="21"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12 4.74087C12.013 5.66812 12.4398 6.54104 13.1635 7.12087C14.3878 8.1545 15.6686 9.11932 17 10.0109C17 10.0109 19.76 7.99817 20.641 7.12087C21.3949 6.5419 21.8845 5.68435 22 4.74087C21.9856 3.22121 20.7439 1.99994 19.2242 2.01087C18.3209 1.92301 17.4502 2.37341 17 3.16137C16.5627 2.38261 15.7097 1.9324 14.82 2.01087C13.2956 2.00662 12.0452 3.21717 12 4.74087ZM13.1494 16.0109H20.5424C21.2467 16.039 21.8391 16.5481 21.9727 17.2403C22.1125 17.9303 21.7382 18.6214 21.084 18.8815L14.3067 21.8009C13.9713 21.9384 13.6125 22.0097 13.25 22.0109C13.0234 22.0105 12.7978 21.9822 12.5781 21.9267L5.9306 20.0517L5.6353 20.0109H2V18.0109H5.6264C5.9053 18.0107 6.18298 18.0477 6.4521 18.1209L13.0814 19.9757C13.2348 20.0114 13.3956 19.9986 13.5414 19.9389L17.8886 18.0663H13.077C12.8144 18.0662 12.5555 18.0045 12.321 17.8863L9.1523 16.2897L7.2607 16.9956C6.92256 17.1213 6.543 17.0565 6.26567 16.8258C5.98834 16.5951 5.8556 16.2337 5.91767 15.8783C5.97975 15.5229 6.22717 15.2279 6.5663 15.1049L12.1351 13.0109H6.6894C6.45695 13.0234 6.23717 13.1207 6.0717 13.2845L5.1694 14.1939C4.63065 14.7369 3.89736 15.0424 3.1324 15.0424H2V13.0109H3.1362C3.3687 13.0109 3.59158 12.918 3.7553 12.753L4.6613 11.8556C5.19774 11.315 5.92781 11.0109 6.6894 11.0109H15.9135C15.922 11.0109 15.9301 11.0129 15.9382 11.0149C15.9457 11.0168 15.9532 11.0187 15.9613 11.019C15.9679 11.0188 15.974 11.0169 15.9801 11.0149C15.9865 11.0129 15.9929 11.0109 16 11.0109C16.6244 11.0363 17.1455 11.4959 17.2487 12.1122C17.352 12.7286 17.009 13.3329 16.427 13.5604L11.7218 15.3309L13.1494 16.0109Z"
                  fill="white"
                ></path>
              </mask>
              <g xmlns="http://www.w3.org/2000/svg" mask="url(#mask0)">
                <rect width="24" height="24" fill="#111111"></rect>
              </g>
            </svg>
            <p>可能感兴趣</p>
          </span>
          <svg
            data-v-07814981=""
            data-v-d87b1342=""
            fill="none"
            viewBox="0 0 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
            class="svg-icon"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M19.2937 12.7074L20.0008 12.0003L19.2938 11.2932L12.0008 3.99927L10.5865 5.41339L16.1727 11.0003H4V13.0003H16.1723L10.5855 18.5868L11.9996 20.0011L19.2937 12.7074Z"
              fill="currentColor"
            ></path>
          </svg>
        </h2>
        <div class="languageChoose">
          <span>中文&nbsp;</span>
          <span class="iconfont icon-zhankai"></span>
        </div>
        <h6>© Inter IKEA Systems B.V. 1999-2021</h6>
        <h6>隐私政策  缺陷披露政策  使用条款</h6>
        <h6>上海工商  沪公网安备 31010402001069号</h6>
        <h6>沪ICP 备17055232号-1</h6>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  //计算属性 依赖缓存,多对一(即多个影响一个),不支持异步
  computed: {},
  //监控data中的数据变化,不依赖缓存,一对多,支持异步
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>
@import '../../assets/border.styl';
@import '../../assets/iconfonts/iconfont.css'
.home {
  height: 100vh;
  overflow-y: scroll;

  .search {
    height: 0.5rem;
    padding-left: 0.2rem;
    display: flex;
    align-items: center;
  }

  .logo {
    width: 0.6rem;
    height: 0.25rem;

    img {
      width: 100%;
    }
  }

  .search-con {
    display: flex;
    flex: 1;
    margin: 0 0.2rem 0 0.1rem;
    padding: 0 0.13rem;
    border-radius: 0.17rem;
    background-color: #F5F5F5;

    img {
      width: 0.16rem;
      vertical-align: center;
    }

    .placeholder {
      height: 0.34rem;
      margin-left: 0.08rem;
      line-height: 0.34rem;
      font-size: 0.12rem;
      color: #999999;
      font-weight: 700;
    }
  }

  .home-goods>div {
    padding: 0 0.2rem 0.2rem;
  }

  .home-goods {
    margin-top: 0.3rem;

    .banner {
      width: 100%;

      .banner-lite {
        height: 4.47rem;
        position: relative;
      }

      .banner-lite>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }

      .buynow {
        position: absolute;
        bottom: 0.2rem;
        left: 0.2rem;
        padding: 0.15rem 0.2rem 0.2rem;

        p {
          font-size: 0.14rem;
          color: #111;
          font-weight: 700;
          line-height: 0.2rem;
        }

        img {
          margin-top: 0.15rem;
        }
      }
    }

    .newManGift {
      .giftBanner {
        width: 100%;

        img {
          width: 100%;
        }
      }
    }

    .childGift {
      .childGifyBanner {
        width: 100%;
        height: 4.47rem;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .childGiftTitle {
        padding: 0.3rem 0.3rem 0.6rem;
        background-color: #f5919d;

        h2 {
          font-size: 0.18rem;
          line-height: 0.26rem;
          margin-bottom: 0.1rem;
          font-weight: 700;
        }

        p {
          margin-bottom: 0.2rem;
        }
      }
    }

    .newHome {
      div {
        margin-bottom: 0.2rem;

        img {
          width: 100%;
        }
      }
    }

    .findFresh {
      .btScroll {
        overflow-x: scroll;

        ul {
          display: flex;

          li {
            width: 2.84rem;
            margin-right: 0.1rem;
            background-color: #00c6fd;
            flex-shrink: 0;

            h3 {
              font-size: 0.16rem;
              color: #FFF;
            }

            img {
              width: 100%;
            }

            .btsTitle {
              height: 2.18rem;
              padding: 0.3rem;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            }
          }
        }
      }
    }

    .hotSall {
      padding: 0 0 0.2rem;

      h2 {
        padding-left: 0.2rem;
      }

      .ulcon {
        overflow-y: scroll;

        ul {
          display: flex;

          li {
            flex-shrink: 0;
            width: 1.575rem;
            height: 3.54rem;

            .imghot {
              padding: 0.15rem;

              img {
                width: 100%;
              }
            }

            .hotSallTitle {
              padding: 0.1rem;
              margin-top: 0.1rem;

              h4 {
                margin-top: 0.21rem;
                line-height: 0.16rem;
                color: #111;
                font-weight: 700;
                font-size: 0.12rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                white-space: normal;
              }

              h5 {
                margin-top: 0.05rem;
                color: #666;
                opacity: 0.68;
                font-size: 0.12rem;
                line-height: 0.16rem;
                height: auto;
                word-break: break-word;
                white-space: normal;
              }

              .padding {
                height: 0.15rem;
              }              
            }
          }
        }
      }

      .black-btn {
        margin: 0 0 0.2rem 0.2rem;
        padding: 0.12rem 0.38rem;
      }
    }

    .feature {
      ul {
        border_1px(0 0 1px 0);

        li {
          padding-bottom: 0.2rem;

          img {
            width: 100%;
            margin-bottom: 0.2rem;
          }

          p {
            font-size: 0.16rem;
            line-height: 0.22rem;
            margin-bottom: 0.1rem;
          }
        }
      }
    }

    .moveto {
      padding-top: 0.4rem;

      >ul {
        display: flex;
        justify-content: space-between;

        li {
          width: 1.625rem;
          margin-top: 0.1rem;

          ul {
            li:first-child {
              margin-top: 0;
            }
          }
        }
      }

      .h2titleSmall {
        border_1px(0 0 1px 0);
      }

      img {
        width: 100%;
      }
    }

    .moreSpace {
      overflow: hidden;

      ul {
        overflow: scroll;
        display: flex;

        li {
          flex-shrink: 0;
          width: 2.32rem;
          margin-right: 0.1rem;
          position: relative;

          img {
            width: 100%;
          }

          .white-btn {
            position: absolute;
            bottom: 0.32rem;
            left: calc(50% - 0.9rem);
            width: 1.8rem;
            padding: 0;
          }
        }
      }
    }

    .moveto2 {
      h2 {
        margin-bottom: 0.1rem;
      }

      p {
        margin-bottom: 0.3rem;
      }
    }

    .findFresh2 {
      li {
        background-color: #634452 !important;
      }
    }

    .findFresh3 {
      li {
        background-color: #0564a8 !important;
      }
    }

    .findFresh4 {
      li {
        background-color: #f15f65 !important;
      }
    }

    .moreInfoCon {
      margin-top: 0.3rem;
    }

    .goodsInfo {
      .h2titleSmall {
        border_1px(0 0 1px 0, #f5f5f5);
      }
    }
    footer{
      background-color: hsla(0,0%,96.1%,.7);
      padding: 0 .2rem .7rem .2rem;
      .h2titleSmall {
        border_1px(0 0 1px 0, #f5f5f5);
      }
      .languageChoose{
        display flex
        justify-content center
        margin-bottom 0.1rem
        border-radius: 40px;
        background: #f5f5f5;
        border: 1px solid #dfdfdf;
        color: #111;
        box-sizing: border-box;
        width 1rem
        height .45rem 
        margin .1rem auto .2rem auto 
        span{
          font-weight: 700;
          font-size: .12rem;
          line-height: .45rem;          
        }
      }
      h6{
        font-size: .12rem;
        line-height: .3rem;
        color:#11111;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        font-weight:normal
      }
    }
  }
}
</style>
